<template>

    <div class="container">
        <h2 class="tip">确认挂号信息</h2>
        <!--        卡片:用于展示就诊人信息-->
        <el-card class="box-card">
            <!--            卡片的头部-->
            <template #header>
                <div class="card-header">
                    <span>选择就诊人</span>
                    <el-button @click="goUser" type="primary" size="default" :icon="User">添加就诊人</el-button>
                </div>
            </template>

            <!--            卡片的身体部分,展示就诊人信息-->
            <div class="user">
                <visitor @click="changeIndex(index)" class="item" v-for="(user,index) in userArr" :key="user.id"
                         :user=user
                         :index=index
                         :currentIndex =currentIndex></visitor>
            </div>
        </el-card>

        <!--        底部展示医生的信息-->
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>挂号信息</span>
                </div>
            </template>
            <el-descriptions
                    class="margin-top"
                    :column="2"
                    border
            >
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            就诊日期
                        </div>
                    </template>
                    {{ DoctorInfo?.workDate }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            就诊医院
                        </div>
                    </template>
                    {{ DoctorInfo?.param.hosname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            就诊科室
                        </div>
                    </template>
                    {{ DoctorInfo?.param.depname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生姓名
                        </div>
                    </template>
                    {{ DoctorInfo?.docname }}

                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生职称
                        </div>
                    </template>
                    {{ DoctorInfo?.title }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生专长
                        </div>
                    </template>
                    {{ DoctorInfo?.skill }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医师服务费
                        </div>
                    </template>
                    <el-tag class="mx-1" size="large" type="danger" effect="plain"> {{ DoctorInfo?.amount }}
                    </el-tag>
                </el-descriptions-item>
            </el-descriptions>
        </el-card>

        <!--        确认挂号按钮-->
        <div class="btn">
            <el-button :disabled="currentIndex==-1" type="primary" size="default" @click="submitOrder">确认挂号</el-button>
        </div>

    </div>

</template>

<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {User} from "@element-plus/icons-vue";
import Visitor from "@/components/visitor/visitor.vue";
import {onMounted, ref} from "vue";
import {reqDoctorInfo, reqGetUser} from "@/api/hospital";
import {Doctor, DoctorInfoData, UserArr, UserResponseDate} from "@/api/hospital/type.ts";
import {reqSubmitOrder} from "@/api/user";
import {ElMessage} from "element-plus";

let $route = useRoute()
let $router = useRouter()
//存储全部就诊人信息
let userArr = ref<UserArr>([])
let DoctorInfo = ref<Doctor>()
//存储用户确定就诊人信息的索引值
let currentIndex = ref<number>(-1)

onMounted(() => {
    fetchUserData()
    fetchDoctorInfo()
})


//预约挂号添加就诊人的方法
const goUser = ()=>{
    //路由跳转
    $router.push({path:'/user/patient',query:{
        type:'add',
        id:''
        }})

}

//获取就诊人信息
const fetchUserData = async () => {
    let result: UserResponseDate = await reqGetUser();
    if (result.code == 200) {
        userArr.value = result.data
    }
}

//获取就诊医生的信息
const fetchDoctorInfo = async () => {
    let result: DoctorInfoData = await reqDoctorInfo(<string>$route.query.docId)
    if (result.code == 200) {
        DoctorInfo.value = result.data
    }
}

// 点击就诊人子组件的回调
const changeIndex = (index: number) => {
    currentIndex.value = index
}

//确定挂号按钮
const submitOrder =async ()=>{
    //医院编号
    let hoscode = DoctorInfo.value?.hoscode
    //医生id
    let id = DoctorInfo.value?.id
    //就诊人id
    let patientId = userArr.value[currentIndex.value].id
    // console.log(hoscode,id,patientId)
    let result:SubmitOrder = await reqSubmitOrder(hoscode as string,id as string,patientId)

    if( result.code==200 ){
        //后台接口有问题
        await $router.push({
            path: '/user/order', query: {
                orderId: result.data
            }
        })
    }else {
        ElMessage({
            type:'error',
            message:'确认挂号接口失效，请稍后再试'
        })
        // console.log("后端接口问题，写死订单")
        // await $router.push({
        //     path: '/user/order', query: {
        //         orderId: 3159
        //     }
        // })
    }

}

</script>


<style scoped lang="scss">
.container {
  .tip {
    font-weight: 800;
    color: #7f7f7f;
  }

  .box-card {
    margin: 20px 0;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .user {
      display: flex;
      flex-wrap: wrap;

      .item {
        width: 32%;
        margin: 5px;
      }
    }
  }

  .btn {
    display: flex;
    justify-content: center;
    margin: 10px 0;
  }

}
</style>